<template>
	<view
		v-if="placeholder && fixed"
		:style="{
			height: Rect.height + 'px'
		}"
	></view>
	<view
		:class="{
			'r-tabbar': true,
			'r-tabbar--fixed': fixed
		}"
		:style="{
			...getComponentThemeStyle,
			zIndex,
			paddingBottom: safeAreaInsetBottom ? `${safeBottom}px` : 0,
			borderTop: border ? 'solid 1px var(--r-border-color)' : 0
		}"
	>
		<slot></slot>
	</view>
</template>
<script setup>
import { datas } from '../themes/index.js';
import { computed, inject, ref, nextTick, getCurrentInstance, provide } from 'vue';
import { callInterceptor } from '@/uni_modules/r-utils-interceptor/js_sdk/index.js';
import { GetRect, getSystemInfo } from '@/uni_modules/r-utils-common/js_sdk/index.js';
import { CONFIG_PROVIDER_KEY, TABBAR_KEY } from '@/uni_modules/r-utils-constant/js_sdk/index.js';
import { getComponentThemeCssVar } from '@/uni_modules/r-theme-base/js_sdk/useComponentTheme.js';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['update:value', 'change']);
const props = defineProps({
	// 当前选中标签的名称或索引值
	value: {
		type: [Number, String],
		default: 0
	},
	//   是否固定在底部
	fixed: {
		type: Boolean,
		default: true
	},
	//   是否显示外边框
	border: {
		type: Boolean,
		default: true
	},
	//   元素 z-index
	zIndex: {
		type: [Number, String],
		default: 1
	},
	//   选中标签的颜色
	activeColor: {
		type: String,
		default: '#1989fa'
	},
	//   未选中标签的颜色
	inactiveColor: {
		type: String,
		default: '#7d7e80'
	},
	//   固定在底部时，是否在标签位置生成一个等高的占位元素
	placeholder: {
		type: Boolean,
		default: false
	},
	//   是否开启底部安全区适配
	safeAreaInsetBottom: {
		type: Boolean,
		default: false
	},
	//   切换标签前的回调函数，返回 false 可阻止切换，支持返回 Promise
	beforeChange: {
		type: Function
	},
	//主题名称
	themeName: {
		type: String,
		default: 'default'
	}
});

const componentsName = 'r-tabbar';
const themeInject = inject(CONFIG_PROVIDER_KEY, {});

const getComponentThemeStyle = computed(() => {
	let themeName = props.themeName;

	if (themeInject?.value?.themeName) {
		//传递过来的有就用传递了
		themeName = themeInject?.value?.themeName;
	}
	if (props.themeName != 'default') {
		//单独设置了组件的 就用单独设置的
		themeName = props.themeName;
	}

	return {
		...getComponentThemeCssVar(themeName, 'r-base', datas.value),
		...getComponentThemeCssVar(themeName, componentsName, datas.value)
	};
});

const safeBottom = ref(0);
if (props.safeAreaInsetBottom) {
	const data = getSystemInfo();
	safeBottom.value = data?.safeAreaInsets?.bottom;
} else {
	safeBottom.value = 0;
}

const Rect = ref({});

nextTick(async () => {
	Rect.value = await GetRect('.r-tabbar', proxy);
});

const setActive = (active) => {
	callInterceptor(props.beforeChange, {
		args: [active],
		done() {
			emit('update:value', active);
			nextTick(() => {
				emit('change', active);
			});
		}
	});
};
const children = ref([]);
const setChildren = (e) => {
	children.value = [...children.value, e];
};
provide(TABBAR_KEY, { props, setActive, children, setChildren, Rect });
</script>
<style lang="scss" scoped>
.r-tabbar {
	z-index: var(--r-tabbar-z-index);
	display: flex;
	box-sizing: content-box;
	width: 100%;
	height: var(--r-tabbar-height);
	background: var(--r-tabbar-background);

	&--fixed {
		position: fixed;
		bottom: 0;
		left: 0;
	}
}
</style>
